<template>
    <el-table :data="tableData" border style="width: 100%;margin-top: 20px;" @current-change="handleCurrentChange">
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column prop="car_pai" label="车牌号" width="180" />
        <el-table-column prop="car_model" label="车辆型号" width="180" />
        <el-table-column prop="car_state" label="是否在训" width="180">
            <template #default="{ row }">
                <el-tag size="small" v-if="row.status == ture">空闲</el-tag>
                <el-tag size="small" v-else>在训</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="car_notes" label="车辆状态" width="180" />
        <el-table-column prop="coach.coach_name" label="所属教练" width="180" />
        <el-table-column prop="image" label="车辆图片">
            <template #default="{ row }">
                <el-image style="width: 150px; height: 100px" :src=row.image />
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[5, 10, 15, 20]"
        :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total=total @size-change="handleSizeChange" @current-change="handleCurrentChange"
        class="pagination-container" />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
const tableData = ref([])
// 分页值
const pageSize4 = ref(5)
const currentPage4 = ref(1)
const total = ref(10)
function getdata() {
    axios.get("http://127.0.0.1:8000/driver_school/cars", {
        params: {
            page: currentPage4.value,
            count: pageSize4.value,
        }
    })
        .then(res => {
            console.log(res)
            tableData.value = res.data.data
            total.value = res.data.total
        })
        .catch(err => {
            console.error(err);
        })
}
// 分页
function handleSizeChange(size) {
    pageSize4.value = size
    getdata()
}
// 分页
function handleCurrentChange(page) {
    currentPage4.value = page
    getdata()
}
onMounted(() => {
    // Your code here
    getdata()
});

// 在组件卸载前执行的操作
onUnmounted(() => {
    // Your code here
});
</script>